<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>我的地址</p>
        </header>
        <!-- 订单列表部分 -->
        <h3></h3>
        <ul class="order">
        <li v-for="(item,index) in del">
            <div class="order-info">
                <p>
                    {{item.address}}
                </p>
                <div class="order-info-right">
                    <p></p>
                    <div class="order-info-right-icon" @click="selectAddress(item)">选择地址</div>
                </div>
            </div>

        </li>

        </ul>
        <ul class="order">
            <li>
                <div class="order-info">
                    <p>
                    </p>
                    <div class="order-info-right">
                        <p></p>
                        <div class="order-info-right-icon" @click="toNewAddress">添加地址</div>
                    </div>
                </div>
            </li>
        </ul>

        <Footer></Footer>
    </div>

</template>

<script>
    import Footer from '../components/Footer.vue';
    export default{
        data(){
            return {
                user:{},
                userId:{},
                del:{},
                business:{}
            }
        },
        created(){
            this.user=JSON.parse(sessionStorage.getItem("user"));
            this.userId=this.user.userId;
            this.$axios.post('DeliveryAddressController/listDeliveryAddressByUserId', this.$qs.stringify({
                userId:this.userId
            })).then(response => {
                this.del=response.data;
                console.log(response.data);
            }).catch(error => {
                console.error(error);
            });
        },
        components:{
            Footer
        },
        methods:{
        toNewAddress(){
            this.$router.push({path:'/newAddress'});
        },
        selectAddress(temp)
        {
            this.$setSessionStorage('address',temp);
            this.business = this.$getSessionStorage('business');
            if(this.business!=null) {
                this.$router.push({path:'/order'})
            }
            else
            {
                this.$router.push({path:'/index'})
            }
        }
        }
    }
</script>

<style scoped>

    /****************** 总容器 ******************/
    .wrapper{
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header{
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 历史订单列表部分 ******************/
    .wrapper h3{
        margin-top: 12vw;
        box-sizing: border-box;
        padding: 4vw;
        font-size: 4vw;
        font-weight: 300;
        color: #999;
    }
    .wrapper .order{
        width: 100%;
    }
    .wrapper .order li{
        width: 100%;
    }
    .wrapper .order li .order-info{
        box-sizing: border-box;
        padding: 2vw 4vw;
        font-size: 4vw;
        color: #666;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wrapper .order li .order-info .order-info-right{
        display: flex;
    }
    .wrapper .order li .order-info .order-info-right .order-info-right-icon{
        background-color: #f90;
        color: #fff;
        border-radius: 3px;
        margin-left: 2vw;
        user-select: none;
        cursor: pointer;
    }

    .wrapper .order li .order-detailet{
        width: 100%;
    }
    .wrapper .order li .order-detailet li{
        width: 100%;
        box-sizing: border-box;
        padding: 1vw 4vw;
        color: #666;
        font-size: 3vw;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /****************** 底部菜单部分 ******************/
    .wrapper .footer{
        width: 100%;
        height: 14vw;
        border-top: solid 1px #DDD;
        background-color: #fff;

        position: fixed;
        left: 0;
        bottom: 0;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .wrapper .footer li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        color: #999;
        user-select: none;
        cursor: pointer;
    }
    .wrapper .footer li p{
        font-size: 2.8vw;
    }
    .wrapper .footer li i{
        font-size: 5vw;
    }

</style>